<template>
  <div>
    <el-row :gutter="10">
      <el-col :span="6">
        <!-- 第一个 -->
        <el-card>
          <Detail title="总销售额" count="￥ 126561">
            <template v-slot:charts>
              <div style="padding-top: 17px">
                <span style="font-size: 14px"
                  >周同比 56.67%<svg
                    style="padding-top: 5px"
                    t="1678517997248"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="11666"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M583.93 296.842l234.8 318.515a73.059 73.059 0 0 1-14.99 102.048l-2.62 1.806a78.116 78.116 0 0 1-44.612 13.908h-469.6a75.588 75.588 0 0 1-76.762-74.414 72.878 72.878 0 0 1 14.269-43.348l234.8-318.515a78.568 78.568 0 0 1 106.834-16.888 77.574 77.574 0 0 1 17.881 16.888z"
                      p-id="11667"
                      fill="#d81e06"
                    ></path></svg
                ></span>
                <span style="font-size: 14px; margin-left: 12px"
                  >日同比 19.96%<svg
                    style="padding-top: 5px"
                    t="1678517732225"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7070"
                    width="16"
                    height="16"
                  >
                    <path
                      d="M458.854 701.962l-234.8-318.605a73.059 73.059 0 0 1 15.262-102.048l2.619-1.806a78.026 78.026 0 0 1 44.612-13.817h469.6a75.588 75.588 0 0 1 76.762 74.413 72.246 72.246 0 0 1-14.269 43.258l-234.8 318.605a78.477 78.477 0 0 1-107.195 17.25 77.213 77.213 0 0 1-17.791-17.25z"
                      p-id="7071"
                      fill="#1afa29"
                    ></path></svg
                ></span>
              </div>
            </template>
            <template v-slot:footer>
              <span>日销售额￥ 12428</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <!-- 第2个 -->
        <el-card>
          <Detail title="访问量" count="88460">
            <template v-slot:charts>
              <lineCharts></lineCharts>
            </template>
            <template v-slot:footer>
              <span>日访问量 12428</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <!-- 第三个 -->
        <el-card>
          <Detail title="支付笔数" count="88460">
            <!-- 柱状图 -->
            <template v-slot:charts>
              <barCharts></barCharts>
            </template>
            <template v-slot:footer>
              <span>转化率 64%</span>
            </template>
          </Detail>
        </el-card>
      </el-col>
      <el-col :span="6">
        <!-- 第4个 -->
        <el-card>
          <Detail title="运营活动效果" count="78%">
            <template v-slot:charts>
              <progressCharts></progressCharts>
            </template>
            <template v-slot:footer>
              <span
                >转化率 78%<svg
                  t="1678519181813"
                  style="margin-left: 5px; width: 11px; height: 11px"
                  class="icon"
                  viewBox="0 0 1024 1024"
                  version="1.1"
                  xmlns="http://www.w3.org/2000/svg"
                  p-id="11993"
                  width="9"
                  height="9"
                >
                  <path
                    d="M75.851852 948.148148V0H0v1024h1024v-75.851852H75.851852z"
                    fill="#1296db"
                    p-id="11994"
                  ></path>
                  <path
                    d="M408.841481 685.700741l227.555556 151.703703 225.28-451.318518 79.644444 46.26963V84.954074L640.18963 258.654815l89.505185 51.579259-152.462222 305.682963-227.555556-151.703704-190.388148 380.017778 136.533333 67.508148 113.019259-226.038518z"
                    fill="#1296db"
                    p-id="11995"
                  ></path></svg
              ></span>
            </template>
          </Detail>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Detail from "./Detail";
import lineCharts from "./lineCharts";
import barCharts from "./barCharts";
import progressCharts from "./progressCharts";
export default {
  name: "",
  components: {
    Detail,
    lineCharts,
    barCharts,
    progressCharts,
  },
};
</script>

<style>
</style>